<template>
 <div class="edu-container" style="padding: 24px; padding-bottom: 86px;">
    <div class="edu-wel-title">
      欢迎加入同济大学大家庭，请你在开学报到前务必完成以下任务，以便于我们为你提供更好地校园服务。
    </div>
    <el-container v-loading="loading" style="padding: 0;height: 100%; min-width: 1200px;">
      <el-aside width="320px" style="height: 100%; padding: 8px 24px 12px;" class="bg-white">
        <ul class="task-list-ul">
          <li :class="{ active : item.isActive }" v-for="(item, index) in taskList" :key="index">
            <template>
              <i v-if="item.status !== 2" class="item-index">{{index + 1}}</i>
              <i v-if="item.status === 2" class="el-icon-circle-check color-success"></i>
              <span @click="getCurrentTask(item)" class="secondary-text" :class="{ 'color-success' : item.isActive }">{{item.templateName}}</span>
            </template>
          </li>
        </ul>


      </el-aside>
      <el-main height="" class="bg-white" style="margin-left:20px; padding:0;">
        <div class="edu-wel-01">
          <TaskPreview v-if="currentTask" class="edu-wel-content" :task-detail="currentTask"/>
        </div>
      </el-main>
    </el-container>
    <footbar></footbar>
  </div>
</template>
<script>
  import {requireTaskByStudent, getOneTask, getTasksNoDetail} from "common/src/api/welcomeService/taskTemplate";
  import {mapState, mapActions} from "vuex";
  import { downloadimage, downloadfile } from 'common/src/api/upload';
  import {
    TaskPreview,
    Footbar
  } from "common/src/views/tools/";
  import filters from "common/src/filters";

  export default {
    name: "Welcome",
    components: {
      TaskPreview,
      Footbar
    },
    data() {
      return {
        loading: false,
        activeName: 'require',
        currentTask: "",
        taskList: [],
        requireTask: [],
        unRequireTask: [],
        currentTask: ''
      };
    },
    methods: {
      ...mapActions(["getStudentTasks"]),
      handleClick(tab, event) {

      },
      async getCurrentTask(obj) {
        this.loading = true;
        this.taskList.map((item) => {
          item.isActive = item.templateId === obj.templateId ? true : false
        });
        let queryItem = {
          templateId: obj.templateId,
          pageNum_: 1,
          pageSize_: 20
        }
        let res = await getTasksNoDetail(queryItem);
        let currentTask = res.data.list[0];
        currentTask.taskStatus = obj.status;
        currentTask.allow = obj.allow;
        currentTask.beginTime = filters.formatDate(currentTask.beginTime, "yyyy/MM/dd hh:mm:ss");
        if(currentTask.templateName == '新生任务指引') {
          currentTask.templateType = 3;
        }
        if(currentTask.picturePath) {
            let welcomebg = await downloadimage(currentTask.picturePath);
            if(welcomebg && welcomebg.data) {
              currentTask.welcomebg = welcomebg.data.base;
              this.currentTask = currentTask;
              this.loading = false;
            }
          }else{
            this.currentTask = currentTask;
            this.loading = false;
          }
          
      },
      async initMenus() {
        this.loading = !!this.tasks.length;
        let uid = this.mockUser ? this.mockUser.uid :  localStorage.getItem('uid');
        let query = {
          studentId: uid
        };
        let queryID = {
          templateId: ''
        };
        let status = '';
        let allow = '';
        await this.getStudentTasks(query);
        if (this.tasks && this.tasks.length > 0) {
          this.tasks.map((item, index) => {
            if (index === 0) {
              queryID.templateId = item.templateId;
              status = item.status;
              allow = item.allow;
              item.isActive = true;
            } else {
              item.isActive = false;
            }
          });
        }
        if(queryID.templateId) {
          let firstTask = await getOneTask(queryID);
          firstTask.data.taskStatus = status;
          firstTask.data.allow = allow;
          firstTask.data.beginTime = filters.formatDate(firstTask.data.beginTime, "yyyy/MM/dd hh:mm:ss");
          if(firstTask.data.templateName == '新生任务指引') {
            firstTask.data.templateType = 3;
          }
          this.loading = false;
          if(firstTask.data.picturePath) {
            let welcomebg = await downloadimage(firstTask.data.picturePath);
            if(welcomebg && welcomebg.data) {
              firstTask.data.welcomebg = welcomebg.data.base
              this.currentTask = firstTask.data;
            }
          }
        }
      }
    },
    computed: {
      ...mapState({
        tasks: state => state.taskTemplate.tasks,
        mockUser: state => state.session.mockUser
      })
    },
    created() {
      this.initMenus();
    },
    watch: {
      tasks: function (val, oldVal) {
        if(this.currentTask.templateId) {
          val.map((item) => {
            if (item.templateId === this.currentTask.templateId) {
              item.isActive = true;
            } else {
              item.isActive = false;
            }
          });
        } else {
          val.map((item, index) => {
            if (index === 0) {
              item.isActive = true;
            } else {
              item.isActive = false;
            }
          });
        }
        if(val) {
          val.map((item) => {
            item.beginTime = filters.formatDate(item.beginTime, "yyyy/MM/dd hh:mm:ss");
          })
        }
        this.taskList = this.tasks;
      }
    }
  };
</script>
<style lang="scss" scoped>
  .edu-container {
    position: absolute;
    top: 72px;
    width: 100%;
    min-width: 1280px;
    height: calc(100% - 72px);
    margin: 0 auto;
    overflow-y: hidden;
    overflow-x: auto;
  }
  .task-list-ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
  }

  .task-list-ul li {
    font-size: 14px;
    line-height: 40px;
    cursor: pointer;
    &:hover {
      .item-index {
        color: #ffffff;
        background-color: #2876c2;
        border: 1px solid #2876c2;
      }
      .secondary-text {
        color: #2876c2;
      }
    }
    &.dis {
      &:hover {
        .item-index {
          color: #666666;
          background-color: #ffffff;
          border: 1px solid #666666;
        }
        .secondary-text {
          color: #999;
        }
      }
    }
    &.active {
      .item-index {
        color: #ffffff;
        background-color: #2876c2;
        border: 1px solid #2876c2;
      }
      .secondary-text {
        color: #2876c2;
      }
    }
  }

  .task-list-ul li {
    vertical-align: middle;
    color: #666666;
  }

  .item-index {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 8px;
    vertical-align: middle;
    border: 1px solid #666666;
    border-radius: 50%;
    line-height: 18px;
    text-align: center;
    font-style: normal;
  }

  .edu-wel-title {
    margin-bottom: 25px;
    line-height: 14px;
    font-size: 14px;
    color: #999999;
  }

  .edu-wel-01 {
    position: relative;
    width: 100%;
    height: 100%;
    .edu-wel-content {
      padding: 100px;
      // margin-left: 100px;
    }
  }
</style>
